<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">
	
		<h1 class="title ui-widget-header ui-corner-all">PrimeFaces Mobile</h1>
		<div class="entry">
			<p>PrimeFaces Mobile is a UI kit to create JSF applications optimized for mobile devices. Powered by jQuery Mobile with PrimeFaces extensions, 
                various platforms such as iPhone, Android, Palm, Blackberry, Windows Mobile are supported.
                Sample applications demonstrated here are best viewed with a mobile device or an emulator..</p>

            <table style="text-align:center" cellpadding="5">
                <tr>
                    <td><span style="font-weight:bold">Showcase</span></td>
                    <td><span style="font-weight:bold">Weather</span></td>
                    <td><span style="font-weight:bold">TwitFaces</span></td>
                    <td><span style="font-weight:bold">News</span></td>
                </tr>

                <tr>
                    <td>
                        <h:outputLink value="showcase.jsf">
                            <p:graphicImage value="/images/mobile/showcase.png" />
                        </h:outputLink>
                    </td>
                    <td>
                        <h:outputLink value="weather.jsf">
                            <p:graphicImage value="/images/mobile/weather.png" />
                        </h:outputLink>
                    </td>
                    <td>
                        <h:outputLink value="twitfaces.jsf">
                            <p:graphicImage value="/images/mobile/twitfaces.png" />
                        </h:outputLink>
                    </td>
                    <td>
                        <h:outputLink value="news.jsf">
                            <p:graphicImage value="/images/mobile/news.png" />
                        </h:outputLink>
                    </td>
                </tr>

                <tr>
                    <td>
                        <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/mobile/showcase.xhtml">
                            View Source
                        </h:outputLink>
                    </td>
                        <td>
                        <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/mobile/weather.xhtml">
                            View Source
                        </h:outputLink>
                    </td>
                    <td>
                        <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/mobile/twitfaces.xhtml">
                            View Source
                        </h:outputLink>
                    </td>
                    <td>
                        <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/mobile/news.xhtml">
                            View Source
                        </h:outputLink>
                    </td>
                </tr>

                <tr>
                    <td colspan="5" style="padding:15px"></td>
                </tr>

                <tr>
                    <td><span style="font-weight:bold">Contacts</span></td>
                    <td><span style="font-weight:bold">Notes</span></td>
                    <td><span style="font-weight:bold">Chat</span></td>
                    <td><span style="font-weight:bold">Maps</span></td>
                </tr>

                <tr>
                    <td>
                        <h:outputLink value="contacts.jsf">
                            <p:graphicImage value="/images/mobile/contacts.png" />
                        </h:outputLink>
                    </td>

                    <td>
                        <h:outputLink value="notes.jsf">
                            <p:graphicImage value="/images/mobile/notes.png" />
                        </h:outputLink>
                    </td>

                    <td>
                        <h:outputLink value="chat.jsf">
                            <p:graphicImage value="/images/mobile/chat.png" />
                        </h:outputLink>
                    </td>
                    <td>
                        <h:outputLink value="maps.jsf">
                            <p:graphicImage value="/images/mobile/maps.png" />
                        </h:outputLink>
                    </td>
                </tr>

                <tr>
                    <td>
                        <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/mobile/contacts.xhtml">
                            View Source
                        </h:outputLink>
                    </td>
                    <td>
                        <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/mobile/notes.xhtml">
                            View Source
                        </h:outputLink>
                    </td>
                    <td>
                        <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/mobile/chat.xhtml">
                            View Source
                        </h:outputLink>
                    </td>
                    <td>
                        <h:outputLink value="http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/mobile/maps.xhtml">
                            View Source
                        </h:outputLink>
                    </td>
                </tr>
            </table>
            
		</div>
				
	</ui:define>
</ui:composition>